<template>
  <div class="node-box">
    <div class="nb-floor">
      <!-- 楼层 -->
      <div v-if="graphData.onlyRead">
        <el-button
          v-for="(item, index) in floorList"
          :key="index"
          type="primary"
          :plain="activeFloor.ID != item.ID"
          @click="changeFloor(item)"
        >
          {{ item.building }}
          <span v-if="item.floor">&nbsp;-&nbsp;{{ item.floor }}层</span>
        </el-button>
      </div>
      <!-- 节点菜单 -->
      <Menu v-if="!graphData.onlyRead" :graphData="graphData" />
    </div>
    <!-- 画布 -->
    <div ref="canvasContentRef" class="canvas-content">
      <Top :graphData="graphData" />
      <div
        v-loading="floorLoading"
        class="canvas-dom"
        :id="graphData.canvasId"
        :style="`height:${graphData.canvasHeight + 2}px;`"
      ></div>
    </div>
    <!-- 信息栏 -->
    <Info
      ref="InfoRef"
      :graphData="graphData"
      @submit="submit"
      :loading="submitLoading"
    />
  </div>
</template>

<script setup name="CustomSeats">
import './register';
import Info from './components/Info';
import Menu from './components/Menu';
import Top from './components/Top';
import {
  initG6,
  saveCanvas,
  watchkeyDown,
  keyUpEvent,
  initSize
} from './common';
import { getFloorList, updateOffice } from '@/api/seats';
import { ElMessage } from 'element-plus';
const route = useRoute();

const graphData = reactive({
  canvasRoom: 'index', // index首页 detail详情页
  canvasId: 'indexMountNode', // 画布id
  toolbarId: 'indexToolBar', // 工具栏id
  canvasWidth: 0, // 画布宽,
  canvasHeight: 0, // 画布高,
  graph: {}, // 实例
  onlyRead: true, // 是否只读
  activeNode: null, // 当前编辑的节点
  editForm: {}, // 正在编辑的表单
  router: useRouter(), // 路由
  changeInfoActive: () => {}, // 信息栏切换当前展开的内容
  canvasContentRef: {} // 动态设置宽高必须
});
const activeFloor = ref({}); // 当前选中楼层

// 宽高变化
const InfoRef = ref();
const canvasContentRef = ref();
function resizeFn() {
  if (route.name !== 'CustomSeats') return;
  initSize(graphData, true);
}

// 按键监听
function keyDownEvent(ev) {
  if (route.name !== 'CustomSeats') return;
  watchkeyDown(ev, graphData);
}

onMounted(() => {
  graphData.changeInfoActive = InfoRef.value.changeInfoActive;
  graphData.canvasContentRef = canvasContentRef;
  resizeFn();
  window.addEventListener('resize', resizeFn);
  window.addEventListener('keydown', keyDownEvent);
  window.addEventListener('keyup', keyUpEvent);
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeFn);
  window.removeEventListener('keydown', keyDownEvent);
  window.removeEventListener('keyup', keyUpEvent);
  graphData.graph?.clear?.();
  graphData.graph?.destroy?.();
});

// 获取楼层信息
const floorList = ref([]);
const floorLoading = ref(false);
async function getFloor() {
  floorLoading.value = true;
  try {
    const res = await getFloorList();
    floorList.value = res?.data || [];
    for (let i = 0; i < floorList.value.length; i++) {
      const item = floorList.value[i];
      if (item.ID === activeFloor.value.ID) {
        return changeFloor(item);
      }
    }
    changeFloor(floorList.value[0]);
  } finally {
    floorLoading.value = false;
  }
}
getFloor();

// 切换楼层
function changeFloor(item) {
  activeFloor.value = item;
  initRender();
}

// 拿到数据后初次渲染
async function initRender() {
  await nextTick();
  if (floorLoading.value) return;
  const parseData = {
    nodes: activeFloor.value.offices || []
  };
  initG6({ graphData, jsonData: JSON.stringify(parseData) });
}

// 提交
const submitLoading = ref(false);
async function submit() {
  const jsonData = saveCanvas(graphData);
  // 拿到canvas对象
  const newParse = JSON.parse(jsonData || '{}');
  const _activeFloor = activeFloor.value || {};
  const paramsData = {
    id: _activeFloor.ID,
    offices: newParse.nodes
  };
  submitLoading.value = true;
  try {
    await updateOffice(paramsData);
    ElMessage.success('提交成功');
    getFloor();
  } finally {
    submitLoading.value = false;
  }
}
</script>

<style lang="scss" scoped>
@import './common.scss';
.nb-floor {
  width: 82px;
  text-align: center;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  :deep(.el-button) {
    margin: 0;
    margin-bottom: 15px;
  }
  :deep(.menu-box) {
    width: 100%;
    margin-left: 0;
    flex: 1;
  }
}
</style>
